
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Accessible TabView</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">

	/*	The following style rules necessary to override style rules in the 
		YUI CSS file. */

	#example ul,
	#example li {
		list-style: none;
		list-style: none;		
	}
	
	#example em {
		font-style: normal;
	}

	#example .yui3-tabpanel {

		/*	Use the "zoom" property to set the the hasLayout property to true.
			This ensures that the background color of the tab's panel will 
			be rendered correctly when the example is running in the 
			example chrome.
		*/

		_zoom: 1;

	}

	#example .yui3-tabpanel a {
		text-decoration: underline;
		color: blue;
	}
	
	#example h3 {
		color: #000;
		font-size: 100%;
		font-weight: bold;
	}

	#example .yui3-tabview {
		margin: 0 .25em;
	}
	

	/*	Hide the instructional text used to label the tabview offscreen.
	 	This ensures it is still available to users of screen readers, but is 
		not visible to sighted users.	*/

	#tabview-heading em {
		position: absolute;
		left: -999em;
	}


	/*	Hide the list while it is being transformed into a tabview.	*/

	.yui3-loading #tabview-1 {
		display: none;
	}

</style>
<script type="text/javascript">

	//	Add a class to the documentElement to prevent the user from seeing 
	//	the unstyled tabview while the necessary CSS and JavaScript 
	//	dependancies are being fetched.

	document.documentElement.className = "yui3-loading";

</script>

<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Accessible TabView</h1>

<div class="exampleIntro">
	<p>
This example illustrates how to create an accessible tabview widget using the 
Focus Manager Node Plugin, 
<a href="../../api/YUI.html#event_delegate">Event's delegation support</a>, and 
Node's support for the 
<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>.
</p>			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<h3 id="tabview-heading">Today's News</h3>
<div id="tabview-1">
    <ul>
        <li class="yui3-tab yui3-tab-selected"><a href="#top-stories"><em>Top Stories</em></a></li>
        <li class="yui3-tab"><a href="#world-news"><em>World</em></a></li>
        <li class="yui3-tab"><a href="#entertainment-news"><em>Entertainment</em></a></li>
        <li class="yui3-tab"><a href="#sports-news"><em>Sports</em></a></li>
        <li class="yui3-tab"><a href="#technology-news"><em>Technology</em></a></li>		
    </ul>            
    <div>
        <div class="yui3-tabpanel yui3-tabpanel-selected" id="top-stories">
			<h3>Top Stories</h3>
			<ul>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20100505/ap_on_re_us/us_times_square_car_bomb"><q>Pakistan native admits to Times Square bomb plot 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20100505/ap_on_go_ot/us_times_square_probe"><q>Security slip let suspect on plane, near takeoff 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20100505/ap_on_el_ge/us_primary_rdp"><q>GOP Coats wins Ind. primary; NC, Ohio vote 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20100505/ap_on_re_us/us_tennessee_floods"><q>Nashville waters receding; crews search for bodies 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20100505/ap_on_bi_ge/us_gulf_oil_spill"><q>Paranoia, anxiety grow over Gulf Coast oil spill 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20100505/ap_on_re_us/us_target_stabbings"><q>Woman in Target stabbing lost custody of child 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20100505/ap_on_re_us/us_mummy_baby"><q>Mummified baby corpse missing from NH grave site 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20100505/ap_on_en_mo/us_people_corey_haim"><q>Coroner: Haim died of pneumonia complications 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20100504/ap_on_fe_st/us_odd_no_arms_black_belt"><q>Mass. woman with no arms preparing for black belt 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20100505/ap_on_sp_ot/us_obit_harwell"><q>Tigers' longtime broadcaster Harwell dead at 92 
    (AP)
</q></a>
				</li></ul>	        	
        </div>
        <div class="yui3-tabpanel" id="world-news">
			<h3>World News</h3>
			<ul>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20100504/ap_on_re_mi_ea/ml_iraq"><q>Iraq's Shiites unite to try to form new government 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20100504/ap_on_re_us/un_nuclear_treaty"><q>Iran's president defiant in face of new sanctions 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20100504/ap_on_bi_ge/eu_iceland_volcano"><q>Iceland's ash may keep choking Europe's air travel 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20100504/ap_on_re_la_am_ca/cb_grenada_beheading"><q>Grenada man hauls bucket of human heads to police 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20100504/ap_on_re_mi_ea/ml_iraq_muqtada_s_army"><q>Shiite militia reviving in post-election Iraq 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/time/20100505/wl_time/08599198688200"><q>Kim Jong Il visits China despite South Korean ship anger 
    (Time.com)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20100505/ap_on_re_eu/eu_greece_financial_crisis"><q>General strike in debt-ridden Greece over new cuts 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20100504/ap_on_re_mi_ea/ml_apnewsalert"><q> 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20100504/ap_on_re_la_am_ca/cb_guantanamo_prisoner_release"><q>US sends 2 Gitmo detainees to Spain, 1 to Bulgaria 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/afp/20100504/pl_afp/sudanusdiplomacyvote"><q>US envoy visits Sudan for first time since elections 
    (AFP)
</q></a>
				</li></ul>        </div>
        <div class="yui3-tabpanel" id="entertainment-news">
			<h3>Entertainment News</h3>
			<ul>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20100505/ap_en_ot/us_tennessee_floods_opry"><q>Despite floods, Grand Ole Opry held across town 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20100504/ap_en_ot/us_people_corey_haim"><q>Coroner: Haim died of pneumonia complications 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20100504/ap_en_ot/us_people_bret_michaels"><q>Doctor: Bret Michaels released from hospital 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20100504/ap_en_tv/us_nielsens"><q>'Idol' viewership down as Cowell nears finale 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20100504/ap_en_ot/us_letterman_extortion"><q>TV producer sentenced in Letterman blackmail plot 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20100505/ap_en_ot/us_people_julia_louis_dreyfus"><q>`Seinfeld' actress is tickled by Walk of Fame typo 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20100505/ap_en_tv/us_people_julia_louis_dreyfus"><q>`Seinfeld' actress is tickled by Walk of Fame typo 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20100504/ap_en_mo/us_people_corey_haim"><q>Coroner: Haim died of pneumonia complications 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20100505/ap_en_mu/us_tennessee_floods_opry"><q>Despite floods, Grand Ole Opry held across town 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/nm/20100504/media_nm/us_thomsonreuters"><q>Thomson Reuters beats Street, CEO sees pickup 
    (Reuters)
</q></a>
				</li></ul>	        	
        </div>
        <div class="yui3-tabpanel" id="sports-news">
			<h3>Sports News</h3>
			<ul>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20100505/ap_on_sp_ot/us_obit_harwell"><q>Tigers' longtime broadcaster Harwell dead at 92 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20100505/ap_on_sp_ot/us_virginia_lacrosse_slaying"><q>Police report details murder suspects 2008 arrest 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20100504/ap_on_sp_go_ne/glf_players_championship"><q>Woods trying to hit his stride 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20100504/ap_on_sp_ot/us_phillies_tasered_fan"><q>Philadelphia chief backs officer who Tasered fan 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20100504/ap_on_sp_ba_ne/bbn_nationals_strasburg"><q>Nationals promote No. 1 pick Strasburg to Triple-A 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20100504/ap_on_sp_fo_ne/fbn_bengals_pacman"><q>Pacman Jones gets 2nd tryout with Bengals 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20100504/ap_on_sp_fo_ne/fbn49ers_willis_extension"><q>Willis gets 5-year contract extension from 49ers 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20100504/ap_on_sp_ba_ne/bbn_braves_cox_congress"><q>Braves manager Bobby Cox honored on Capitol Hill 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20100505/ap_on_sp_bk_ne/bkn_hornets_coaching_search"><q>Hornets interview Johnson, Casey for coaching job 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20100504/ap_on_sp_co_ne/fbc_texas_a_m_sherman_iraq"><q>Texas A&M grid coach visiting troops in Iraq 
    (AP)
</q></a>
				</li></ul>	        	
        </div>
        <div class="yui3-tabpanel" id="technology-news">
			<h3>Technology News</h3>
			<ul>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/20100504/ap_on_hi_te/us_tec_apple_antitrust_inquiry"><q>Feds to look at Apple policy on programming tools 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/20100504/ap_on_hi_te/us_webby_awards"><q>Roger Ebert, Jim Carrey among Webby Award winners 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/20100504/ap_on_hi_te/us_tec_cable_ad_claims"><q>Time Warner Cable, Cox asked to drop ad claims 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ytech_wguy/20100504/tc_ytech_wguy/ytech_wguy_tc1926"><q>Kindle upgrade adds Facebook and Twitter 
    (Christopher Null)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ytech_wguy/20100504/tc_ytech_wguy/ytech_wguy_tc1923"><q>Craigslist faces new prostitution investigation 
    (Christopher Null)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/20100504/ap_on_hi_te/us_airport_security_program_relaunch"><q>Airport security speedup program to relaunch 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/macworld/20100504/tc_macworld/billboardopenssubmissionsforfirstmusicappawards"><q>Billboard opens submissions for first Music App Awards 
    (Macworld.com)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/nf/20100504/bs_nf/73153"><q>T-Mobile Shows Off New Android 3G Phone: myTouch 3G Slide 
    (NewsFactor)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/macworld/20100504/tc_macworld/studiosstilltryingtofigureoutmobilevideo"><q>Studios still trying to figure out mobile video 
    (Macworld.com)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/nf/20100504/bs_nf/73132"><q>For First Time in Six Years, Nintendo's Profits Drop 
    (NewsFactor)
</q></a>
				</li></ul>	        	
        </div>			
    </div>
</div>

<script type="text/javascript">

	YUI({ 

			base: "../../build/",
			modules: {
				"tabviewcss": {
					type: "css",
					fullpath: "assets/tabview.css"
				},
				"tabviewjs": {
					type: "js",
					fullpath: "assets/tabview.js",
					requires: ["node-focusmanager", "tabviewcss"]
				}

			},
			timeout: 10000

		}).use("tabviewjs", function(Y, result) {

		    //	The callback supplied to use() will be executed regardless of
		    //	whether the operation was successful or not.  The second parameter
		    //	is a result object that has the status of the operation.  We can
		    //	use this to try to recover from failures or timeouts.

		    if (!result.success) {

		        Y.log("Load failure: " + result.msg, "warn", "Example");

				//	Show the tabview HTML if the loader failed that way the 
				//	original unskinned tabview will be visible so that the 
				//	user can interact with it either way.

				document.documentElement.className = "";

		    }

	});

</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
